<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>

    <!-- 
        data与el的两种写法：
        1.el的两种写法：
            （1）.new Vue时候配置el属性。
            （2）.先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
        2.data的两种写法：
            （1）.对象式
            （2）.函数式
            如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
        3.一个重要的原则：
            由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了
     -->

    <div id="root">
        <h1>你好，{{name}}</h1>
    </div>

</body>

<script type="text/javascript">
    Vue.config.productionTip = false;

    const v = new Vue({
        // el: '#root', //el的第一种写法
        // data: {  //data的第一种写法
        //     name: 'MDX'
        // }

        data: function () { //data的第二种写法
            return {
                name: 'MDX'
            }
        }

        // data() { //简写
        //     return {
        //         name: 'MDX'
        //     }
        // }
    });

    v.$mount('#root') //el的第二种写法

    console.log(v);
</script>

</html>